﻿@*//******************************************************************************************************
    //  QuickSearch.cshtml - Gbtc
    //
    //  Copyright © 2017, Grid Protection Alliance.  All Rights Reserved.
    //
    //  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
    //  the NOTICE file distributed with this work for additional information regarding copyright ownership.
    //  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may
    //  not use this file except in compliance with the License. You may obtain a copy of the License at:
    //
    //      http://opensource.org/licenses/MIT
    //
    //  Unless agreed to in writing, the subject software distributed under the License is distributed on an
    //  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
    //  License for the specific language governing permissions and limitations.
    //
    //  Code Modification History:
    //  ----------------------------------------------------------------------------------------------------
    //  01/10/2017 - Billy Ernest
    //       Generated original version of source code.
    //
    //*******************************************************************************************************@
@using System.Collections.Specialized
@using GSF.Data
@using GSF.Data.Model
@using GSF.Web.Model
@using PQDashboard.Model
@model AppModel
@{
    DataContext dataContext = Model.DataContext;

    Layout = null;
    string xdaInstance = dataContext.Connection.ExecuteScalar<string>("SELECT Value FROM DashSettings WHERE Name = 'System.XDAInstance'");
    string timeWindow = dataContext.Connection.ExecuteScalar<string>("SELECT Value FROM DashSettings WHERE Name = 'System.TimeWindow'") ?? "1";

}
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head id="Head1">
    <title>QuickSearch</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />

    <link rel="shortcut icon" type="image/ico" href="~/favicon.ico" />
    <link rel="stylesheet" href="~/Content/bootstrap/theme.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/font-awesome.css" />
    <link rel="stylesheet" href="~/Content/bootstrap-3.3.2.min.css" />
    <link rel="stylesheet" href="~/Content/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" href="~/Scripts/PrimeUI/primeui.min.css" />
    <link rel="stylesheet" href="~/Content/MeterEventsByLine.css" type="text/css" />
    <link rel="stylesheet" href="~/Content/jquery.jspanel.min.css" />
    <link rel="stylesheet" href="~/Content/daterangepicker.css" />

    <style>
        .jsPanelTable,.jsPanelTable th, .jsPanelTable td{
            width: 100%;
            border: 1px solid black;
            border-collapse: collapse;
            padding: 0;
            margin: 0;
        }
    </style>

    <script type="text/javascript" src="~/Scripts/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui.js"></script>
    <script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.blockUI.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap-3.3.2.min.js"></script>
    <script type="text/javascript" src="~/Scripts/PrimeUI/primeui.js"></script>
    <script src="~/signalr/hubs"></script>
    <script type="text/javascript" src="~/Scripts/jquery.jspanel-compiled.js"></script>
    <script type="text/javascript" src="~/Scripts/Site.js"></script>
    <script type="text/javascript" src="~/Scripts/jstorage.js"></script>
    @Scripts.Render("~/Scripts/random")
</head>

<body style="height: 100%;">
<div class="gridheader">
    <center>
        <table>
            <tbody>
                <tr>
                    <td align="center" width="200px"><input class="form-control" id="datePicker" /></td>
                    <td align="center" width="100px"><span>(+/- min)</span></td>
                    <td align="center" width="50px"><input id="minutes" value="10" class="form-control" /></td>
                    <td align="center" width="50px"><button class="btn btn-primary" onclick="apply()">Apply</button></td>
                    <td align="center" width="50px"><button class="btn" onclick="openMultiNoteModalAll()"><span class="glyphicon glyphicon-pencil"></span></button></td>
                </tr>
            </tbody>
        </table>
    </center>
</div>


<div style="height: 100%; width: 100%;">
    <div style="height: 100%; display: inline-block" id="table"></div>
</div>

<!-- Modals -->
<div id="notesModal" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 50%">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add a note to event record <span id="eventId"></span></h4>
            </div>
            <div id="previousNotesDiv">

            </div>
            <div class="modal-body">
                <textarea wrap="hard" id="note" class="form-control"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveNote()">Add Note</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

<div id="multiNotesModal" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 50%">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add a note to associated event records</h4>
            </div>
            <div class="modal-body">
                <textarea wrap="hard" id="multiNote" class="form-control"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveMultiNote()" data-dismiss="modal">Add Note</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>


<div id="multiNotesModalAll" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 50%">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add a note to all listed event records</h4>
            </div>
            <div class="modal-body">
                <textarea wrap="hard" id="multiNoteAll" class="form-control"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveMultiNoteAll()" data-dismiss="modal">Add Note</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

<script>

    var userId = "@HttpUtility.JavaScriptStringEncode(ViewBag.username)"
    var disabledList = $.jStorage.get('disabledList');
    var disabledArray = Object.keys(disabledList.Events).map(function(o){ if(!disabledList.Events[o]) return o}).filter(function(val) { return val !== undefined; });
    var json = [];

    $(document).ready(function () {
        $(window).on('hubConnected', function () {
            $('#datePicker').daterangepicker({
                timePicker: true,
                timePickerIncrement: 1,
                timePicker24Hour: true,
                singleDatePicker: true,
                showDropdowns: true,
                locale: {
                    format: 'MM/DD/YYYY HH:mm'
                }
            });
        })

    });

    function apply() {
        getEvents(moment.utc($("#datePicker").val(), "MM-DD-YYYY HH:mm"), $('#minutes').val());
    }
    var floatrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {

        return '<div style="text-align: center; margin-top: 5px;">' + parseFloat(value).toFixed(4) + "m" + '</div>';

    }

    var columnsrenderer = function (value) { return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>'; };

    function getEvents(date, minuteWindow) {
        dataHub.getEvents(date, minuteWindow).done(function (data) {
            json = data;
            $.each(data, function (_, obj) {
                obj.voltage = Number(obj.voltage);
                obj.thecurrentdistance = Number(obj.thecurrentdistance);
            });

            $('#table').puidatatable({
                scrollable: true,
                scrollHeight: '100%',
                scrollWidth: '100%',
                columns: [
                    {
                        field: 'theinceptiontime', headerText: 'Start Time', headerStyle: 'width: 30%', bodyStyle: 'width: 30%; height: 20px', sortable: true, content:
                          function (row) {
                              return "<a href='" + '@xdaInstance' + "/Workbench/Event.cshtml?EventID=" + row.theeventid + "' style='color: blue" + (row.UpdatedBy ? '; background-color: yellow' : '') + "' target='_blank' " + (row.UpdatedBy ? "title='This event has been edited.'" : "") + ">" + row.theinceptiontime + "</a>"
                          }
                    },
                    { field: 'theeventtype', headerText: 'Event Type', headerStyle: 'width: 20%', bodyStyle: 'width: 20%; height: 20px', sortable: true },
                    { field: 'thelinename', headerText: 'Line Name', headerStyle: 'width: 20%', bodyStyle: 'width:  20%; height: 20px', sortable: true },
                    { field: 'voltage', headerText: 'Line KV', headerStyle: 'width:  6%', bodyStyle: 'width:  6%; height: 20px', sortable: true },
                    { field: 'thefaulttype', headerText: 'Phase', headerStyle: 'width:  6%', bodyStyle: 'width:  6%; height: 20px', sortable: true },
                    { field: 'thecurrentdistance', headerText: 'Distance', headerStyle: 'width: 10%', bodyStyle: 'width: 10%; height: 20px', sortable: true },
                    { headerStyle: 'width: 60px', content: function (data) { return makeOpenSEEButton_html(data); }},
                    { headerText: '', headerStyle: 'width: 50px', content: function (row) {
                            return '<button style="height: 30px" onclick="openResultsModal(\'' + JSON.stringify(row).replace(/"/g, '\\\'') + '\')"><span class="glyphicon glyphicon-option-horizontal" title=""></span><span id="' +row.theeventid + 'asterisk" style="color: green; position: sticky; bottom: 0">'+(testForAllStuff(row) ? '*' : '') +'</span></button>';
                        }
                    }
                ],
                datasource: data
            });

        });
    }

    function openResultsModal(row) {
        var data = JSON.parse(row.replace(/\\/g, '\\\\').replace(/'/g, '"'));

        var html = '<table class="jsPanelTable table"><tr class="gridheader"><th colspan="3">More Info Available...</th></tr>';
        if (data.theeventtype == "Fault")
            html += '<tr><td style="width: 50%">View table of Fault details</td><td colspan="2" style="width:auto">' + makeFaultSpecificsButton_html(data) + '</td></tr>';

        html += '<tr><td style="width: 50%">List <b>simultaneous</b> Faults and Sags (+/- @timeWindow sec)</td><td colspan="2" style="width: auto"><button id="simultaneousFaultsAndSags" class="btn btn-default">' + data.SimultaneousFAndSCount + ' Events Found</button><button style="margin-left: 10px" onclick="openMultiNoteModal(' + data.theeventid + ')"><span class="glyphicon glyphicon-pencil" title=""></span></button></td></tr>';
        dataHub.getSimultaneousFaultsAndSags(data.theeventid).done(function (data) {

            var html = "<style>" +
                            ".listtable{" +
                                "min-width: 150px;" +
                                "max-height: 400px;" +
                                "display: block;" +
                            "}" +
                            ".contextmenu1.list-group{" +
                                "margin: 0;" +
                            "}" +
                            ".listtr:hover{" +
                                "background-color: #66BB6A;" +
                            "}" +
                        "</style>" +
                            "<table class='table table-responsive listtable'><tr><td>Line</td><td>Start Time</td><td>Type</td></tr>";

            $.each(data, function (index, object) {
                html += "<tr class=\"listtr\" onclick=\"OpenWindowToOpenSEE(" + object.ID + ")\"><td>" + object.LineName + "</td><td>" + object.StartTime + "</td><td>" + object.EventTypeName + "</td></tr>"
            });

            html += "</table>";


            jsPanel.contextmenu('#simultaneousFaultsAndSags', {
                border: '1px solid gray',
                contentSize: 'auto auto',
                contentOverflow: { horizontal: 'hidden', vertical: 'auto' },
                content: html,
                callback: function (panel) {
                    panel.css('z-index', '2001')
                },
                trigger: 'left'

            });
        });

        html += '<tr><td style="width: 50%">List <b>simultaneous</b> events (+/- 5 sec)</td><td colspan="2" style="width: auto"><button id="simultaneousEvents" class="btn btn-default">' + data.SimultaneousCount + ' Events Found</button></td></tr>';
        dataHub.getSimultaneousEvents(data.theeventid).done(function (data) {
            //console.log(data);

            var html = "<style>" +
                            ".listtable{" +
                                "min-width: 150px;" +
                                "max-height: 400px;" +
                                "display: block;" +
                            "}" +
                            ".contextmenu1.list-group{" +
                                "margin: 0;" +
                            "}" +
                            ".listtr:hover{" +
                                "background-color: #66BB6A;" +
                            "}" +
                        "</style>" +
                        //"<ul class='list-group contextmenu1' >" +
                            "<table class='table table-responsive listtable'><tr><td>Line</td><td>Start Time</td><td>Type</td></tr>";

            $.each(data, function (index, object) {
                html += "<tr class=\"listtr\" onclick=\"OpenWindowToOpenSEE(" + object.ID + ")\"><td>" + object.LineName + "</td><td>" + object.StartTime + "</td><td>" + object.EventTypeName + "</td></tr>"
            });

            html += "</table>";


            jsPanel.contextmenu('#simultaneousEvents', {
                border: '1px solid gray',
                contentSize: 'auto auto',
                contentOverflow: { horizontal: 'hidden', vertical: 'auto' },
                content: html,
                callback: function (panel) {
                    panel.css('z-index', '2001')
                },
                trigger: 'left'

            });
        });

        html += '<tr><td style="width: 50%">List events for this <b>line</b> (last 60 days)</td><td colspan="2"style="width: auto"><button id="getSixty" class="btn btn-default">' + data.SixtyDayCount + ' Events Found</button></td></tr></table>';
        dataHub.getEventsForLineLastSixtyDays(data.theeventid).done(function (data) {
            //console.log(data);

            var html = "<style>" +
                            ".listtable{" +
                                "min-width: 150px;" +
                                "max-height: 400px;" +
                                "display: block;" +
                            "}" +
                            ".contextmenu1.list-group{" +
                                "margin: 0;" +
                            "}" +
                            ".listtr:hover{" +
                                "background-color: #66BB6A;" +
                            "}" +
                        "</style>" +
                        //"<ul class='list-group contextmenu1' >" +
                            "<table class='table table-responsive listtable'><tr><td>Line</td><td>Start Time</td><td>Type</td></tr>";

            $.each(data, function (index, object) {
                html += "<tr class=\"listtr\" onclick=\"OpenWindowToOpenSEE(" + object.ID + ")\"><td>" + object.LineName + "</td><td>" + object.StartTime + "</td><td>" + object.EventTypeName + "</td></tr>"
            });

            html += "</table>";

            jsPanel.contextmenu('#getSixty', {
                border: '1px solid gray',
                contentSize: { width: 'auto', height: 'auto' },
                contentOverflow: { horizontal: 'hidden', vertical: 'auto' },
                content: html,
                callback: function (panel) {
                    panel.css('z-index', '2001')
                },
                trigger: 'left'

            });
        });


        html += '<table class="jsPanelTable table"><tr class="gridheader"><th colspan="3">Add/Edit Event Data</th></tr>';
        html += '<tr><td style="width: 50%;"><a href="#"><span onclick="OpenWindowToXDAEdit(' + data.theeventid + ')">Edit Event Data</span></a></td><td style="width: 5%; padding: 0;"><button style="height: 33px" onclick="OpenWindowToXDAEdit(' + data.theeventid + ')"><span class="glyphicon glyphicon-edit" title=""></span></button></td><td style="width: auto">' + (data.UpdatedBy == null ? 'Unedited' : 'Last Updated By ' + data.UpdatedBy) + '</td></tr>';
        html += '<tr><td style="width: 50%;"><a href="#"><span onclick="openNoteModal(' + data.theeventid + ')">Add/Edit Notes for this event</span></a></td><td style="width: 5%; padding: 0"><button style="height: 33px" onclick="openNoteModal(' + data.theeventid + ')"><span class="glyphicon glyphicon-pencil" title=""></span></button></td><td style="width: auto"><span id="noteCount">' + data.Note + '</span> Notes Created</td></tr></table>';


        if (testForStuff(data)) {
            html += '<table class="jsPanelTable table"><tr class="gridheader"><th colspan="3">Get Results From Enabled Extended Analytics</th></tr>';


            //if (data.pqiexists > 0) {
            //    html += '<tr><td style="width: 50%">PQI</td><td style="width: 5%; padding: 0">' + makePQIButton_html(data) + '</td><td style="width: auto"><span id="'+data.theeventid+'pqicount">0</span> Devices Impacted</td></tr>';
            //}

            //dataHub.getPQICount(data.theeventid).done(function (count) {
            //    $('#' + data.theeventid + 'pqicount').text(count);
            //});

            $.each(data.ServiceList.split(','), function (i, k) {
                if (data[k] !== null && data[k] !== undefined)
                    html += '<tr><td style="width: 50%">' + k + '</td><td style="width: 5%; padding: 0">' + makeEASDetailsButton_html(data, data[k], '@Html.Raw(Url.Content("~/"))' + k + '.aspx', '@Html.Raw(Url.Content("~/Images/"))' + k + '.png', 'Launch ' + k + ' Page') + '</td><td style="width: auto">Confidence: ' + data[k] + '</td></tr>';

            });


            html += '</table>';
        }
        var myPanel = $.jsPanel({
            headerTitle: "",
            content: html,
            contentSize: '500 auto',
            callback: function (panel) {
                panel.css('z-index', '2000')
            }
        });

    }

    function leftClick(word) {
        $(Object.keys(event), function (i, key) {
            console.log(key);
        });
        if (word == 'sixty') {
            document.getElementById('getSixty').dispatchEvent(new MouseEvent('contextmenu', { clientX: event.clientX, clientY: event.clientY, bubbles: true, screenX: event.screenX, screenY: event.screenY, view: window, isTrusted: true }))
        }
        else {
            document.getElementById('simultaneousEvents').dispatchEvent(new CustomEvent('contextmenu'))
        }
    }

    function testForStuff(data) {
        if (data.pqiexists > 0) return true;
        $.each(data.ServiceList.split(','), function (i, k) {
            if (data[k] !== null)
                return true;
        });
        return false;
    }

    function testForAllStuff(data) {
        if (data.UpdatedBy !== null) return true;
        if (data.Note > 0) return true;
        if (data.pqiexists > 0) return true;
        $.each(data.ServiceList.split(','), function (i, k) {
            if (data[k] !== null)
                return true;
        });

        return false;
    }

    function OpenWindowToXDAEdit(id) {
        var popup = window.open('@xdaInstance' + "/Workbench/Event.cshtml?EventID=" + id);
    }

    function makeEASDetailsButton_html(data, value, url, imagepath, title) {
        var return_html = "";

        url += "?eventid=" + data.theeventid;

        if (value != "" && value != "0" && value != null) {

            //return_html += '<div style="cursor: pointer;">';
            return_html += '<button style="height: 33px" onClick="OpenWindowToEAS(\'' + url + '\');"  title=\'' + title + '\'>';
            return_html += '<img src="' +imagepath + '" /></button>';
            //return_html += '</div>';
        }
        return (return_html);
    }


    function OpenWindowToEAS(url) {
        var popup = window.open(url, url, "left=0,top=0,status=no,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no");
        return false;
    }


    function makeOpenSEEButton_html(id) {
        var return_html = "";
        //return_html += '<div style="cursor: pointer;">';
        return_html += '<button onClick="OpenWindowToOpenSEE(' + id.theeventid + ');" title="Launch OpenSEE Waveform Viewer">';
        return_html += '<img src="@Html.Raw(Url.Content("~/Images/seeButton.png"))" /></button>';
        //return_html += '</div>';
        return (return_html);
    }

    function makeFaultSpecificsButton_html(id) {
        var return_html = "";

        if (id.theeventtype == "Fault") {
            //return_html += '<div style="cursor: pointer;">';
            return_html += '<button onClick="OpenWindowToFaultSpecifics(' + id.theeventid + ');" title="Open Fault Detail Window">';
            return_html += '<img src="@Html.Raw(Url.Content("~/Images/faultDetailButton.png"))" /></button>';
            //return_html += '</div>';
        }
        return (return_html);
    }

    function makePQIButton_html(id) {
        var return_html = "";

        return_html += '<button style="height: 33px" onClick="OpenWindowToPQI(' + id.theeventid + ');"title="Open PQI Window">';
        return_html += '<img src="@Html.Raw(Url.Content("~/Images/pqiButton.png"))" /></button>';

        return (return_html);
    }

    function OpenWindowToOpenSEE(id) {
        var popup = window.open("@Html.Raw(Url.Content("~/Main/OpenSEE"))" + "?eventid=" + id + "&faultcurves=1", id + "openSEE");
        return false;
    }

    function OpenWindowToFaultSpecifics(id) {
        var popup = window.open("@Html.Raw(Url.Content("~/FaultSpecifics.aspx"))?eventid=" + id, id + "FaultLocation", "left=0,top=0,status=no,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no");
        return false;
    }

    function OpenWindowToPQI(id) {
        var popup = window.open("@Html.Raw(Url.Content("~/PQIByEvent.aspx"))?eventid=" + id, id + "PQI", "left=0,top=0,width=1024,height=768,status=no,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no");
        return false;
    }

    function openNoteModal(eventId) {
        $('#previousNotes').remove();
        dataHub.getNotesForEvent(eventId).done(function (data) {
            $('#eventId').text(eventId);
            if (data.length > 0)
                $('#previousNotesDiv').append('<table id="previousNotes" class="table" ><tr><th style="width: 50%">Note</th><th style="width: 20%">Time</th><th style="width: 20%">User</th><th style="width: 10%"></th></tr></table>')
            $.each(data, function (i, d) {
                $('#previousNotes').append('<tr id="row' + d.ID + '"><td id="note' + d.ID + '" style="word-break:break-all;">' + d.Note + '</td><td>' + moment(d.TimeStamp).format("MM/DD/YYYY HH:mm:ss") + '</td><td>' + d.UserAccount + '</td><td><button onclick="editNote(' + d.ID + ')"><span class="glyphicon glyphicon-pencil" title="Edit this note.  Ensure you save after pushing this button or you will lose your note."></span></button><button onclick="removeNote(' + d.ID + ')"><span class="glyphicon glyphicon-remove" title="Remove this note"></span></button></td></tr>');
            });

            $('#note').val('');
            $('#notesModal').modal('show');
        });
    }

    function saveNote() {
        dataHub.saveNoteForEvent($('#eventId').text(), $('#note').val(), userId).done(function () {
            dataHub.getNotesForEvent($('#eventId').text()).done(function (data) {
                $('#previousNotes').remove();
                $('#noteCount').text(data.length);
                if (data.length > 0)
                    $('#previousNotesDiv').append('<table id="previousNotes" class="table" ><tr><th style="width: 50%">Note</th><th style="width: 20%">Time</th><th style="width: 20%">User</th><th style="width: 10%"></th></tr></table>')
                $.each(data, function (i, d) {
                    $('#previousNotes').append('<tr id="row' + d.ID + '"><td id="note' + d.ID + '" style="word-break:break-all;">' + d.Note + '</td><td>' + moment(d.TimeStamp).format("MM/DD/YYYY HH:mm:ss") + '</td><td>' + d.UserAccount + '</td><td><button onclick="editNote(' + d.ID + ')"><span class="glyphicon glyphicon-pencil" title="Edit this note.  Ensure you save after pushing this button or you will lose your note."></span></button><button onclick="removeNote(' + d.ID + ')"><span class="glyphicon glyphicon-remove" title="Remove this note"></span></button></td></tr>');
                });

                $('#note').val('');
                $('#notesModal').modal('show');
            });

        });
    }

    function removeNote(id) {
        dataHub.removeEventNote(id);
        $('#row' + id).remove();
        $('#noteCount').text(parseInt($('#noteCount').text()) - 1 );
    }

    function editNote(id) {
        $('#note').val($('#note' + id).text());
        dataHub.removeEventNote(id);
    }

    function openMultiNoteModal(eventId) {
            $('#eventId').text(eventId);
            $('#multiNote').val('');
            $('#multiNotesModal').modal('show');
    }

    function saveMultiNote() {
        dataHub.saveMultiNoteForEvent($('#eventId').text(), $('#multiNote').val(), userId);
    }


    function openMultiNoteModalAll() {
        $('#multiNoteAll').val('');
        $('#multiNotesModalAll').modal('show');
    }

    function saveMultiNoteAll() {
        dataHub.saveMultiNoteForAllEvents(json.map(x => x.theeventid), $('#multiNoteAll').val(), userId).done(function () {
            getEvents(moment.utc($("#datePicker").val(), "MM-DD-YYYY HH:mm"), $('#minutes').val());
        });
    }

</script>

</body>
</html>
